import React from 'react';

/*
  学习目标：使用React中的纯组件PureComponent，来避免无效更新
  PureComponent 内置了shouldComponentUpdate钩子函数，
  会自动比较props, 避免手动比较props

  💥注意：不要滥用PureComponent
  1. class组件是早期的写法，现在更多使用函数式组件
  2. 内部比较也会耗费性能，真正需要性能优化时才考虑使用
*/
export default class App extends React.Component {
  state = {
    count: 0,
    msg: '1',
    name: 'zs',
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleClickMsg = () => {
    this.setState({ msg: this.state.msg + '~' });
  };

  handleClickName = () => {
    this.setState({ name: this.state.name + 'zs' });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <h2>{this.state.msg}</h2>
        <button onClick={this.handleClick}>点我修改数量</button>
        <button onClick={this.handleClickMsg}>点我修改msg</button>
        <button onClick={this.handleClickName}>点我修改name</button>
        <Footer count={this.state.count} name={this.state.name}></Footer>
      </div>
    );
  }
}

class Footer extends React.PureComponent {
  //  我没有写shouldComponentUpdate
  render() {
    console.log('render被执行了  ----->  ');
    return (
      <div>
        我是Footer ， 我只接受count更新
        <h1>{this.props.count}</h1>
        <h2>{this.props.name}</h2>
      </div>
    );
  }
}
